<template>
  <div class="h100 tableSearchListFlexPage">
    <!-- 搜索区域 -->
    <div class="tableListSearch">
      <software-manage-search
        @clickbtn="handleClickSearchBtn"
        ref="flowConfigSearchComp"
      ></software-manage-search>
    </div>
    <!-- 操作区域 -->
    <div class="tableListAction">
      <a-button-group>
        <auth-button type="primary" :auth="mcPerms.view" @click="handleClickSearchBtn">
          <i class="iconfont icon-chazhao"></i>
          {{ $t('inquiry') }}
        </auth-button>
        <a-button @click="initiSearchValue">
          <i class="iconfont icon-qingkong"></i>
          {{ $t('clear') }}
        </a-button>
      </a-button-group>
      <a-dropdown :disabled="false">
        <template #overlay>
          <a-menu>
            <a-menu-item @click="handleAddNewForm" key="1">新建申请表单</a-menu-item>
            <a-menu-item @click="handleCopyForm" key="2">根据所选项复制新建</a-menu-item>
          </a-menu>
        </template>
        <auth-button type="primary" :auth="mcPerms.add">
          <i class="iconfont icon-xinjian"></i>
          {{ $t('sqxbd') }}
          <!-- <a-icon type="down"/> -->
        </auth-button>
      </a-dropdown>
      <auth-button type="defaualt" :auth="mcPerms.viewFormFlow" @click="reviewProcess">
        <a-icon type="branches" />
        查看表单流程
      </auth-button>
      <!-- <auth-button
        type="danger"
        :auth="mcPerms.delete"
        @click="handleBatchDelete"
        :disabled="disableBatchDeleteBtn"
      >
        <i class="iconfont icon-suoxiao1"></i>
        {{ $t('multiDel') }}
      </auth-button> -->
    </div>
    <!-- 列表区域 -->
    <div class="tableListMain commonTableSty">
      <software-manage-table-list
        ref="flowConfigTableComp"
        :tableData="childTableData"
        @selectedRowchange="handleselectedRowchange"
      ></software-manage-table-list>
    </div>
    <!-- 新增对话框 -->
    <add-form-modal
      ref="addConfigModal"
      :formData="childFormData"
      @addOrEditDone="handleRefreshTable"
    ></add-form-modal>
    <!-- 查看表单流程 -->
    <a-modal
      title="查看表单流程"
      :width="1100"
      :visible="modalVisibal"
      @cancel="reviewProcess"
      :destroyOnClose="true"
      :keyboard="false"
      :maskClosable="false"
      :closable="true"
      :centered="true"
      :footer="null"
    >
      <div class="processPicture">
        <img src="~@assets/flowChart.png" alt="流程图">
      </div>
    </a-modal>
  </div>
</template>
<script>
import i18n from '@/lang'
import SoftwareManageSearch from './components/SoftwareManageSearch.vue'
import SoftwareManageTableList from './components/SoftwareManageTableList.vue'
import AddFormModal from './components/AddFormModal.vue'
import AuthButton from '@/components/AuthButton'
import { mcPerms } from '@/config/permission/index'
export default {
  components: {
    SoftwareManageSearch,
    SoftwareManageTableList,
    AuthButton,
    AddFormModal
  },
  computed: {
    replacedTip () {
      return i18n.t('batchDeleteFlowConfigTip').replace('__ Selected__', '"' + this.selectedRowFlowName + '"')
    }
  },
  data () {
    return {
      mcPerms,
      selectedRows: [],
      disableBatchDeleteBtn: true,
      childTableData: [],
      selectedMultiFlowName: '',
      selectedRowFlowName: '',
      selectedIdArr: [],
      childFormData: {},
      modalVisibal: false
    }
  },
  activated () {
    this.$refs.flowConfigSearchComp.getVersionList()
  },
  created () {},
  mounted () {
    this.initiSearchValue()
  },
  methods: {
    // 搜索条件 重置和初始化
    initiSearchValue () {
      this.$store.commit('resetSoftwareMCQueryParams')
      this.$refs.flowConfigTableComp.refreshData(true)
    },
    // 顶部搜索区域点击查询按钮
    handleClickSearchBtn () {
      this.$refs.flowConfigTableComp.refreshData(false)
    },
    // 点击新增按钮
    handleAddNewForm () {
      this.selectedRows=[]
      this.$router.push({ path: '/mc/new' })
    },
    // 点击新增按钮
    handleCopyForm () {
      console.log(this.selectedRows,'7777')
      if(this.selectedRows.length==1){
        this.$router.push({ path: '/mc/new',query: { originalId: this.selectedRows[0].id, t: 7 } })
        this.selectedRows=[]
      }else if(this.selectedRows.length>1){
        this.$message.warning(this.$t('pleaseSelectOne'))
      }else{
        this.$message.warning(this.$t('pleaseSelect'))
      }
    },
    // 点击批量删除按钮
    handleBatchDelete () {
      if (this.selectedRows.length > 0) {
        const selectedApplyNums = this.selectedRows.map((item) => {
          return '"' + item.applyNumber + '"'
        })
        const that = this
        this.$confirm({
          title: that.$t('systemTip'),
          content: that.$t('deleteSoftMCtip').replace('__Content__', selectedApplyNums.toString()),
          onOk () {
            that.$api.deleteSoftMCForm({ ids: that.selectedIdArr }).then(() => {
              that.$refs.flowConfigTableComp.refreshData(true)
            })
          }
        })
      } else {
        this.disableBatchDeleteBtn = true
      }
    },
    // 表格组件选择项改变后传递上来触发的事件
    handleselectedRowchange (data) {
      if (data.length > 0) {
        this.disableBatchDeleteBtn = false
        this.selectedIdArr = data.map((item) => {
          return item.id
        })
      } else {
        this.disableBatchDeleteBtn = true
      }
      this.selectedRows = data
    },
    // 新增或编辑配置成功以后刷新表格
    handleRefreshTable () {
      this.$refs.flowConfigTableComp.refreshData(true)
    },
    // 查看表单流程
    reviewProcess () {
      this.modalVisibal = !this.modalVisibal
    }
  }
}
</script>
<style lang="less" scoped>
// .tablePageWarp {
//   padding: 24px 24px 8px 24px;
//   height: 100%;
//   // overflow: auto;
//    }
  .tableListAction {
    display: inline-flex;
    margin-top: 8px;
    .ant-btn-group {
      margin-right: 16px;
      button {
      margin-right: 0;
      }
    }
    button {
      margin-right: 16px;
      &:nth-last-child(1) {
        margin-right: 0;
      }
    }
  }
  .tableListMain {
    margin-top: 16px;
    margin-bottom: 16px;
  }
  .processPicture {
    height: 500px;
    overflow: auto;
    img{
      width: 100%;
    }
  }
</style>
